<template>
    <div class="home_page">
        <!-- 左导航 -->
        <vsidder></vsidder>
        <!-- 右主体 -->
        <section class="wrapper">
            <vheader></vheader>
            <vue-tabs></vue-tabs>
            <vfooter></vfooter>
        </section>
        <loginDialog></loginDialog>
    </div>
</template>
<script>
// import vheader from "@comp/header/header.vue";
// import vsidder from "@comp/sidenav/sidder.vue";
// import vfooter from "@comp/footer/footer.vue";
// import loginDialog from "@comp/loginDialog/loginDialog.vue";
export default {
    data() {
        return {};
    },
    components: {
        // vheader,
        // vsidder,
        // vfooter,
        // loginDialog
    },
    mounted() {
        // this.$taber.open("main");
    },
    methods: {}
};
</script>
<style lang="less">
.home_page {
    width: 100%;
    height: 100%;
    background-color: #e8f2f7;
    overflow: hidden;
    display: flex;
    font-size: 14px;

    .wrapper {
        flex: 1;
        height: 100%;
        position: relative;
        min-width: 550px;
        overflow-x: hidden;
    }

    .vfooter {
        height: 40px;
        line-height: 40px;
    }

    .vue-tabs {
        width: 100%;
        position: absolute;
        top: 40px;
        bottom: 40px;
        overflow: hidden;
        .tabs-list-wrapper {
            padding: 0;
        }
        .tabs-list li {
            color: #676764;
        }

        .tabs-list > li.active:after {
            background-color: #309cfc;
        }

        .tabs-content-wrapper {
            height: calc(~"100% - 31px");
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
}
</style>